<script setup lang="ts">
import {useMenuViewStore} from "@/store/views/sys/admin/menuStore";
import {storeToRefs} from "pinia";
import {Perm, Role} from "@/utils/enum-type";

const store = useMenuViewStore()
const {openEdit, openAdd, getList, title, openDelete} = store

const {tableData, menuTypeOptions, statusOptions, isExpandAll} = storeToRefs(store)


onMounted(async () => {
  await getList()
})
</script>

<template>
  <!-- 表格 -->
  <x-card>
    <div  v-perm="Perm.SysMenuAdd">
      <!--    新增按钮-->
      <el-button type="success" @click="openAdd()">
        <i-ep-plus/>
        <span>新增</span>
      </el-button>
      <el-divider/>
    </div>
    <el-table :data="tableData" style="width: 100%" row-key="id" :default-expand-all="isExpandAll" show-overflow-tooltip>
      <el-table-column fixed prop="name" label="菜单名" min-width="200">
        <template #default="{row}">
          <x-icon :name="row.icon"></x-icon>
          <span class="ml-2">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" min-width="70">
        <template #default="{row}">
          <x-tag :value="row.type" :options="menuTypeOptions"/>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路由路径" min-width="100"/>
      <el-table-column prop="component" label="组件路径" min-width="160"/>
      <el-table-column prop="status" label="显示" min-width="70">
        <template #default="{row}">
          <x-tag :value="row.status" :options="statusOptions"></x-tag>
        </template>
      </el-table-column>
      <el-table-column prop="perm" label="权限标识" min-width="150"/>
      <el-table-column prop="redirect" label="跳转至" min-width="80"/>
      <el-table-column prop="sort" label="排序" min-width="160"/>
      <el-table-column

          v-perm="[[Perm.SysMenuAdd],[Perm.SysMenuEdit],[Perm.SysMenuDelete]]" fixed="right" label="操作"
          width="200" :show-overflow-tooltip="false">
        <template #default="{row}">
          <div class="flex flex-justify-end">
            <el-button v-perm="Perm.SysMenuAdd" v-if="[1,2].includes(row.type)" link
                       type="primary" size="small" @click="openAdd(row)">
              <i-ep-plus/>
              <span>新增</span>
            </el-button>
            <el-button v-perm="Perm.SysMenuEdit" link type="primary" size="small" @click="openEdit(row.id)">
              <i-ep-edit/>
              <span>编辑</span>
            </el-button>
            <el-button v-perm="Perm.SysMenuDelete" link type="danger" size="small" @click="openDelete(row.id)">
              <i-ep-delete/>
              <span>删除</span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </x-card>
</template>